<template>
    <div class="health-services">
        <div class="section-header">
            <span class="title">健康直通车</span>
            <van-button size="small" plain hairline type="primary" class="more-btn" @click="onMoreClick">
                更多 <van-icon name="arrow" />
            </van-button>
        </div>

        <van-grid :column-num="2" :border="false" :gutter="10">
            <van-grid-item v-for="(item, index) in serviceItems" :key="index" @click="onServiceClick(item.path)">
                <div class="service-item" :style="{ background: item.bgColor }">
                    <van-icon :name="item.icon" :color="item.iconColor" size="32" />
                    <span class="service-name">{{ item.name }}</span>
                </div>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const serviceItems = [
    {
        name: '心脏科',
        icon: 'like-o',
        path: '/department/cardiology',
        bgColor: '#FFF0F0',
        iconColor: '#EE0A24'
    },
    {
        name: '神经科',
        icon: 'cluster-o',
        path: '/department/neurology',
        bgColor: '#F0F4FF',
        iconColor: '#1989FA'
    }
]

const onServiceClick = (path: string) => {
    if (path.startsWith('/department/')) {
        const deptName = path.split('/').pop();
        router.push(`/department/${deptName}`);
    } else {
        router.push(path);
    }
}

const onMoreClick = () => {
    router.push('/departments');
}
</script>

<style scoped lang="scss">
.health-services {
    margin: 0px 6px;
    padding: 16px 12px;
    background: #fff;

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .more-btn {
            font-size: 12px;
            height: 24px;
            padding: 0 8px;

            .van-icon {
                font-size: 12px;
            }
        }
    }

    .service-item {
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;

        .service-name {
            margin-top: 8px;
            font-size: 14px;
            color: #333;
        }
    }
}
</style>